import React, {Component} from 'react';
import {Steps} from 'antd';
import {Form, Input, InputNumber, Button} from 'antd';
import './form.scss';
import {FormOne, Props1} from "../interface/oneFace";

import FormTwo from '../components/formTwo';
import FormOther from '../components/formOther'
import {withRouter} from "react-router";


const {Step} = Steps;
class TableAdd extends Component<any, any> {
    //表单布局
    layout = {
        labelCol: {span: 5},
        wrapperCol: {span: 15},
    };
    //验证规则
    validateMessages = {
        required: '${label} is required!',
        types: {
            email: '${label} is not a valid email!',
            number: '${label} is not a valid number!',
        },
        number: {
            range: '${label} must be between ${min} and ${max}',
        },
    };

    formRef = React.createRef<any>();

    //改变tab
    changeTab = (val: number) => {
        this.setState({current: val});
        console.log(this.state.current);
    }

    //表单赋值
    setForm = (data: any) => {
        setTimeout(() => {
            console.log(this , this.formRef, this.formRef.current);
            if(this.formRef.current) this.formRef.current.setFieldsValue(data);
            this.setState({data: data});
        })
    }

    //表单提交 先用组件间 后期在换成redux
    onFinish = (value: FormOne) => {
        if(this.state.data.bankName){
            value.bankName = this.state.data.bankName
        }
        if(this.state.data.linkPerson){
            value.linkPerson = this.state.data.linkPerson
        }
        this.setState({data: value});
        this.changeTab(1);
    };

    //新增用户
    submit = (data: FormOne) => {
        this.props.history.push({pathname: '/layout/table', state: data});
    }

    //返会
    onHome = () => {
        this.props.history.push({pathname: '/layout/table'});
    }
    //tab值
    state: Props1 = {
        current: 0,
        data: {
            name: '',
            age: 0,
            email: '',
            website: '',
            introduction: ''
        }
    };


    render() {
        return (
            <div className="one-layout">
                <div className="top">
                    新增用户
                </div>
                <div className="bottom"></div>
                <div className="formTwo">
                    <div className="stepClass">
                        <Steps current={this.state.current}>
                            <Step title="基本信息"/>
                            <Step title="开户行"/>
                            <Step title="证件图片"/>
                        </Steps>
                    </div>
                    <div className="formCentent">
                        {
                            this.state.current === 0 ?
                                (<Form ref={this.formRef} onFinish={this.onFinish} {...this.layout}
                                       validateMessages={this.validateMessages}>
                                        <Form.Item name='name' label="Name" rules={[{required: true}]}>
                                            <Input/>
                                        </Form.Item>
                                        <Form.Item name='email' label="Email" rules={[{type: 'email'}]}>
                                            <Input/>
                                        </Form.Item>
                                        <Form.Item name='age' label="Age" rules={[{type: 'number', min: 0, max: 99}]}>
                                            <InputNumber/>
                                        </Form.Item>
                                        <Form.Item name='website' label="Website">
                                            <Input/>
                                        </Form.Item>
                                        <Form.Item name='introduction' label="Introduction">
                                            <Input.TextArea/>
                                        </Form.Item>
                                        <Form.Item wrapperCol={{...this.layout.wrapperCol, offset: 8}}>
                                            <Button onClick={this.onHome} className="cancalBtn">取消</Button>
                                            <Button type="primary" htmlType="submit">
                                                下一步
                                            </Button>
                                        </Form.Item>
                                    </Form>
                                )
                                : this.state.current === 1 ?
                                (<FormTwo {...this.state.data} setForm={this.setForm.bind(this)} changeTab={this.changeTab} />) :
                                <FormOther submit={this.submit}  {...this.state.data} setForm={this.setForm.bind(this)} changeTab={this.changeTab}/>
                        }
                    </div>
                </div>
            </div>
        )
    }
}
export default withRouter(TableAdd);
